import React, { useState } from 'react';
import { Form, Input, Button, Radio, Select, Cascader, DatePicker, InputNumber, TreeSelect, Switch,Divider } from 'antd';
import { SyncOutlined } from '@ant-design/icons';
import { putLocalStorage, getLocalStorage } from '@/utils/localStorage';
import { getInitApiAddress } from '@/utils/customerUtils';
import { connect, FormattedMessage, useIntl } from 'umi';
import styles from './style.less';

const ConfigForm = props => {
    const { dispatch } = props;
    const tailLayout = {
        wrapperCol: {
            offset: 8,
            span: 18,
        },
    };
    const onFinish = values => {
        const { dispatch } = props;
        const apiAddress = values.apiAddress;
        if (apiAddress != undefined) {
            putLocalStorage("apiUrl", apiAddress);
            location.reload();
        }
    };
    const onChange = (e) => {
        putLocalStorage("apiOnMock", e);
    };
    const getApiOnMockInfo = () => {
        const apiOnMockInfo = getLocalStorage("apiOnMock");
        if (apiOnMockInfo != undefined && apiOnMockInfo == "true") {
            return true;
        }
        return false;
    }

    const onChangeClearPreIndex = (e) => {
        putLocalStorage("clearPreIndex", e);
    };
    const getClearPreIndex = () => {
        const clearPreIndex = getLocalStorage("clearPreIndex");
        if (clearPreIndex != undefined && clearPreIndex == "true") {
            return true;
        }
        return false;
    }
    
    const onChangeShowGetOrPost = (e) => {
        putLocalStorage("showGetOrPost", e);
    };
    const getShowGetOrPost = () => {
        const showGetOrPost = getLocalStorage("showGetOrPost");
        if (showGetOrPost != undefined && showGetOrPost == "true") {
            return true;
        }
        return false;
    }
    

    const [form] = Form.useForm();
    return (
        <div>
            <Divider />
            <Form
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 12,
                }}
                layout="horizontal"
                initialValues={{
                    apiAddress: getInitApiAddress(),
                }}
                size='middle'
                form={form}
                onFinish={onFinish}
            >
                <Form.Item label="接口地址" >
                    <Form.Item label="" name="apiAddress" className={styles.apiAddress} >
                        <Input />
                    </Form.Item>
                    <Button icon={<SyncOutlined />} type="primary" htmlType="submit" className={styles.reloadBtn}>
                        刷新接口菜单
                    </Button>
                </Form.Item>
                <Form.Item label="开启自动赋值"  >
                    <Switch name="apiOnMock" defaultChecked={getApiOnMockInfo} onChange={onChange} style={{ display: 'inline-block' }} />
                    <span className={styles.apiOnMock}>
                        接口调试时,录入框系统自动添加测试数据
                    </span>
                </Form.Item>
                <Form.Item label="去掉接口描述排序前缀"  >
                    <Switch name="clearPreIndex" defaultChecked={getClearPreIndex} onChange={onChangeClearPreIndex} style={{ display: 'inline-block' }} />
                    <span className={styles.apiOnMock}>
                        如：接口名称为 “100-功能接口”，此项开启，菜单显示为 “功能接口”
                    </span>
                </Form.Item>
                <Form.Item label="菜单中显示get或post前缀"  >
                    <Switch name="showGetOrPost" defaultChecked={getShowGetOrPost} onChange={onChangeShowGetOrPost} style={{ display: 'inline-block' }} />
                    <span className={styles.apiOnMock}>
                        如：接口名称为 “功能接口”，此项开启，菜单显示为 “POST:功能接口”
                    </span>
                </Form.Item>
            </Form>
        </div>
    );
};

export default ConfigForm